//获取图片信息

//给按钮绑定点击事件
$('button').click(() => {
    var user = getCookie('username');
    if (!user) {
        layer.msg('您还没登录,即将跳转到登录页面', {
            time: 1500
        }, () => {
            localStorage.setItem('url', location.href);
            location.href = './login.html'
        });
        return;
    }
    //获取商品名称
    var name = ($('.sell-name').text()).replace(/\s*/g, "");
    var price = ($('.txtAreaPrice').text()).replace(/\s*/g, "");
    var src = ($('.img-box img').attr('src')).replace(/\s*/g, "");
    //展开加载层
    var loadindex = layer.load(1, {
        shade: [0.4, "#000"]
    })
    //发送ajax请求
    $.get({
        url: './php/sellinfo.php',
        data: {
            user: user,
            name: name,
            price: price,
            src: src
        },
        success: res => {
            var { meta: { status, msg } } = JSON.parse(res);
            layer.close(loadindex);
            if (status === 1) {
                layer.msg(msg, {
                    icon: 1,
                    time: 1500
                })
            } else {
                layer.msg(msg, {
                    icon: 2,
                    time: 1500
                })
            }
        }
    })
})
//放大镜效果
$('.img-box').hover(function () {
    // 让遮罩和大盒子显示
    $('.mask').css('display', 'block')
    $('.big-img').css('display', 'block')
    $(this).mousemove(function (e) {
        var x = e.pageX;
        var y = e.pageY;
        var left = x - $('.mask').width() / 2
        var top = y - $('.mask').height() / 2
        $('.mask').offset({left,top})
        // 遮罩移动过的距离 / 中盒子的宽高 = 大图移动的距离 / 大图的大小
        console.log();
        var bigLeft = $('.mask').position().left / $('.img-box').width() * $('.big-img').width()
        var bigTop = $('.mask').position().top / $('.img-box').height() * $('.big-img').height()
        $('.big-img').css({
            backgroundPositionX: -bigLeft-100 ,
            backgroundPositionY: -bigTop-50 
        })
    })
}, function () {
    $('.mask').css('display', 'none')
    $('.big-img').css('display', 'none')
})
